Vue 3.5 的重要变化
Vue 3.5 将之前需要通过 vite.config.ts 手动开启的两个实验特性变为了默认启用:
1. defineModel 正式稳定
原先需要在 vite 配置中手动启用:
// vite.config.ts(3.3/3.4 需要手动配置)
defineConfig({
plugins: [
vue({
script: {
defineModel: true, // 3.5 起不再需要
},
}),
],
})
typescript
Vue 3.5 中 defineModel 已默认启用,无需任何配置:
<script setup lang="ts">
// 直接使用,无需额外配置
const modelValue = defineModel<string>({ default: '' })
</script>
<template>
<input v-model="modelValue" />
</template>
vue
2. Props 解构响应式
Vue 3.3 中需要这样配置:
// vite.config.ts(3.3 版本)
vue({
script: {
propsDestructure: true // 实验特性
},
})
typescript
Vue 3.5 中 props 解构自动保持响应式,无需配置:
<script setup lang="ts">
// 解构后的变量自动保持响应式
const { title, count = 0 } = defineProps<{
title: string
count?: number
}>()
</script>
vue
3. Props 默认值写法简化
// ❌ 旧写法(withDefaults)
interface Props {
title: string
count?: number
}
const props = withDefaults(defineProps<Props>(), {
count: 0,
})
// ✅ 新写法(直接默认值)
const { title, count = 0 } = defineProps<{
title: string
count?: number
}>()
typescript
升级建议
从 Vue 3.2/3.3/3.4 升级到 3.5 没有破坏性更新,主要调整:
- 删除
vite.config.ts中的defineModel和propsDestructure配置 - 运行
pnpm update vue@latest即可
性能提升
Vue 3.5 在响应式系统内部做了大量优化,包括更高效的依赖追踪和更新调度机制,对大型应用场景下的性能提升尤为明显。
↑